<template>
  <div class="flex column module-inner">
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      员工资历
    </div>
    <div id="container-employeeQualification" ref="container" class="content common-module-bg"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EmployeeQualification',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      charts: null
    }
  },
  watch: {
    'moduleData.length'() {
      this.init()
    }
  },
  beforeDestroy() {
    echarts.dispose(this.charts)
    this.charts = null
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const [legend, level1List, level2List] = [[], [], []]
      this.moduleData.forEach(item => {
        legend.push(item.name)
        level1List.push(item)
        const subList = item.subList.map(child => ({
          ...child,
          name: item.name,
          childName: child.name,
          childValue: child.value,
          parentValue: item.value
        }))
        level2List.push(...subList)
      })
      const options = {
        tooltip: {
          trigger: 'item',
          position: 'inside',
          formatter: function (params) {
            const {level, name, value, parentValue, childName, childValue} = params.data
            let dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color}"></span>`
            return level === 1
              ? `${dotHtml} ${name}: ${value}`
              : `${dotHtml} ${name}: ${parentValue}<br/>${dotHtml} ${childName}: ${childValue}`
          }
        },
        legend: {
          show: true,
          orient: 'vertical',
          data: legend,
          right: this.$fontSize(0.1),
          top: this.$fontSize(0.1),
          itemHeight: this.$fontSize(0.1),
          itemWidth: this.$fontSize(0.2),
          textStyle: {
            color: '#fff',
            fontSize: this.$fontSize(0.1)
          }
        },
        series: [
          {

            type: 'pie',
            color: [
              'rgb(99,178,238)',
              'rgb(118,218,145)',
              'rgb(248,203,127)',
              'rgb(248,149,136)',
              'rgb(124,214,207)'
            ],
            data: level1List,
            label: {
              show: true,
              fontSize: this.$fontSize(0.15),
              formatter: function (obj) {
                console.log(obj)
                return `${parseInt(obj.percent)}%`
              }
            },
            radius: ['0', '40%'],
            center: ['40%', '50%'],
            itemStyle: {
              borderWidth: 1,
              borderColor: '#FFFFFF'
            },
            clockwise: true
            // animation: false,
          },
          {
            type: 'pie',
            color: [
              'rgba(99,178,238, .8)',
              'rgb(99,178,238)',
              'rgb(118,218,145)',
              'rgb(118,218,145)',
              'rgb(248,203,127)',
              'rgb(248,203,127)',
              'rgb(248,203,127)',
              'rgb(248,149,136)',
              'rgb(248,149,136)',
              'rgb(248,149,136)',
              'rgb(124,214,207)',
              'rgb(124,214,207)',
              'rgb(124,214,207)'
            ],
            backgroundColor: 'rgba(255,255,255,1)',
            data: level2List,
            label: {
              show: false
            },
            radius: ['40%', '60%'],
            center: ['40%', '50%'],
            itemStyle: {
              borderWidth: 1,
              borderColor: '#FFFFFF'
            }
            // animation: false,
          }
        ]
      }
      this.charts = echarts.init(
        this.$refs.container,
        null,
        {
          renderer: 'svg'
        }
      )
      // charts.showLoading({
      //   text: '',
      //   color: 'rgb(79, 142, 195)',
      //   textColor: '#000',
      //   maskColor: 'rgba(255, 255, 255, 0)',
      //   zlevel: 10
      //
      // })
      this.charts.setOption(options, true)
      this.charts = {
        resize: this.charts.resize
      }
      // setTimeout(() => {
      //   charts.hideLoading()
      // }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.content {
  flex: 230;
}
</style>
